<!--
 * @Date: 2022-03-26 09:57:23
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-26 13:38:45
 * @FilePath: \vue3Components\src\views\menutest.vue
 * @Description: something
-->
<template>
  <el-divider>默认</el-divider>
  <div style="width: 300px;  margin-bottom: 150px;">
    <Mymenu :data="data1" defaultActive="1"></Mymenu>
  </div>
  <el-divider>无限子菜单</el-divider>
  <div style="width: 300px;">
    <my-infinit-menu :data="data2"></my-infinit-menu>
  </div>
</template>
 <script lang='ts' setup>
import Mymenu from '../components/menu/Mymenu.vue'
import myInfinitMenu from '../components/menu/menu'
let data1 = [
  {
    name: '导航1',
    index: '1',
    icon: 'Document'
  },
  {
    name: '导航2',
    index: '2',
    icon: 'edit'
  },
  {
    name: '导航3',
    index: '3',
    icon: 'Document',
    children: [{
      name: '导航3-1',
      index: '3-1',
      icon: 'Document',
    },
    {
      name: '导航3-2',
      index: '3-2',
      icon: 'Document',
    }]
  }
]
let data2 = [
  {
    name: '导航1',
    index: '1',
    icon: 'Document'
  },
  {
    name: '导航2',
    index: '2',
    icon: 'edit'
  },
  {
    name: '导航3',
    index: '3',
    icon: 'Document',
    children: [{
      name: '导航3-1',
      index: '3-1',
      icon: 'Document',
      children: [{
        name: '导航3-1-1',
        index: '3-1-1',
        icon: 'Document',
        children: [{
          name: '导航3-1-1-1',
          index: '3-1-1-1',
          icon: 'Document',
        }]
      }]
    }]
  }
]
</script>
<style lang='less' scoped>
</style>